import React, { useState } from "react";

interface TreeProps {
  data: any[],
  checkbox: boolean,
  casade: boolean,
  onChangeExpand: any,
  onSelectNode: any
}
const ReactTree = ({
  data,
  checkbox,
  casade,
  onChangeExpand,
  onSelectNode
}: TreeProps) => {
  //初始化数据
  function init(data: any, parent: any) {
    return data.map((item: any) => {
      if (item.children && item.children.length > 0) {
        item.open = "close";
        item.children = init(item.children, item);
      } else {
        item.open = "";
      }
      item.parent = parent;
      item.checked = "";

      return item;
    })
  }
  data = data && data.length > 0 ? JSON.parse(JSON.stringify(data)) : [];
  const [rootData, setData] = useState<any>(init(data, null))
  function getChecked(item: any) {
    /**
     * 级联控制：
     *  1. 子级都没选
     *  2. 子级没有全选
     *  3. 子级全部选中
     */

    let hasUnchecked = item.children.map((item: any) => item.checked).indexOf('') !== -1;
    let hasChecked = item.children.map((item: any) => item.checked).indexOf('checked') !== -1;
    let hasHalf = item.children.map((item: any) => item.checked).indexOf('half') !== -1;

    if (hasUnchecked && !hasChecked && !hasHalf) {
      return '';
    } else if (hasChecked && !hasUnchecked && !hasHalf) {
      return 'checked';
    } else {
      return 'half';
    }
  }

  function adjustCheck(item: any) {
    let parent = item.parent;
    //父级变化
    while (parent) {
      parent.checked = getChecked(parent);
      parent = parent.parent;
      console.log(parent)
    }
    //子级的变化
    if (item.children && item.children.length > 0) {
      adjust(item.children, item.checked);
    }
    function adjust(arr: any, checked: any) {
      arr.forEach((item: any) => {
        item.checked = checked;
        if (item.children && item.children.length > 0) {
          adjust(item.children, item.checked);
        }
      })
    }
  }

  const Tree = ({ data }: any) => {
    return (
      <ul className='tree'>
        {
          data.map((item: any) => (
            <li className={`tree-item ${item.open}`} key={item.id}>
              <div className='tree-title'>
                <div
                  className={`folder ${item.open}`}
                  onClick={() => {
                    if (item.open !== "") {
                      if (item.open === "open") {
                        item.open = "close";
                      } else {
                        item.open = "open";
                      }
                      setData([...rootData]);
                    }
                    return onChangeExpand(rootData, item);
                  }}
                />
                {
                  checkbox && (
                    <div className={`checkbox ${item.checked}`}
                      onClick={() => {
                        if (item.checked === "") {
                          item.checked = "checked";
                        } else {
                          item.checked = "";
                        }
                        casade && adjustCheck(item);
                        setData([...rootData]);
                        return onSelectNode(rootData, item);
                      }}
                    />
                  )
                }
                <div className={`item ${item.checkbox ? 'checkbox-show' : 'checkbox-hidden'}`}
                  onClick={() => {
                    if (!checkbox) {
                      return onSelectNode(rootData, item);
                    }
                  }}
                >{item.title}</div>
              </div>
              {
                item.children && item.children.length > 0 ? <Tree data={item.children} /> : ""
              }
            </li>
          ))
        }
      </ul>
    )
  }
  return <Tree data={rootData} />
}

export default ReactTree;